<template>
  <van-popup v-model="show" position="bottom">
    <van-cell-group title="请选择银行以及银行所在省市，再选择开户行">
      <bank-select ref="bankSelect" :value="form.bankId" @confirm="getBank" :required="true" />
      <area-select ref="areaSelect" title="银行所在省市" :area-id="[form.province,form.city]" :required="true" @confirm="getArea" />
    </van-cell-group>
    <van-radio-group v-model="openBank.checked">
        <van-cell-group title="选择开户行" style="height:400px;overflow-y:auto;">
          <van-cell v-for="(item,index) in openBank.list" :key="index" :title="item.name" clickable @click="selectBank(item)">
            <template #right-icon>
              <van-radio :name="item.id" checked-color="#EF5C28" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
  </van-popup>
</template>

<script>
import bankSelect from '@/components/bankSelect';
import areaSelect from '@/components/areaSelect';
export default {
    data(){
        return{
            show: false,
            form:{
              bankId: null,
              bankName: null,
              province: null,
              city: null,
              openBankName: null,
              paymentLines: null,
            },
            openBank:{
              checked: null,
              list:[],
            },
        }
    },
    components:{
      bankSelect,areaSelect,
    },
    created(){
    },
    watch:{
      'form.bankId'(newVal,oldVal){
        this.form.province = null
        this.form.city = null;
        this.openBank.checked = null;
        this.openBank.list = [];
      }
    },
    methods:{
        init(){
            this.show = true;
        },
        getBank(data){
          this.form.bankId = data.id;
          this.form.bankName = data.name;
        },
        getArea(data){
          this.form.province = data[0].code;
          this.form.city = data[1].code;
          this.getList();
        },
        getList(){
          this.$http('get','/common/openBankList', {bankId: this.form.bankId, province: this.form.province, city: this.form.city}, (data,msg) =>{
            if(data.rows.length == 0){
              this.$toast.fail({duration: 2000, message: '查不到开户行！'});
              this.openBank.list = [];
            }else{
              this.openBank.list = data.rows.map(item => {
                  return {id: item.paymentLines, name: item.openBankName};
              });
            }
          });
        },
        selectBank(data) {
          this.openBank.checked = data.id
            this.$emit('confirm', data);
            this.show = false;
        },
    }
}
</script>

<style>

</style>